<template>
  <div>
    <!--    1. 搜索-->
    <div class="search">
      <input v-focus type="text" v-model="inpVal" placeholder="搜索歌曲,歌手" class="inp" id="">
    </div>
    <!--    2. 热门搜索-->
    <div class="hot-search" v-if="isShow">
      <div class="title">热门搜索</div>
      <div class="wrapper">
        <div class="item" v-for="(item, index) in hots" :key="index">{{ item.first }}</div>
      </div>
    </div>
    <!--    3. 搜索的数据列表展示-->
    <div class="search-list" v-else>
      <div class="name">搜索 "{{ inpVal }}"</div>
      <div class="info" v-for="item in list" :key="item.name">{{ item.name }}</div>
      <div>{{ info }}</div>
    </div>


  </div>
</template>
<script>
import { info } from 'autoprefixer'

export default {
  //定义指令--获取焦点
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  },
  data () {
    return {
      hots: [],
      isShow: true, //是否显示热门搜索
      inpVal: '', //输入的内容
      list: [], //搜索的动态名称
      info: ''
    }
  },
  created () {
    this.hotSearch()
  },
  methods: {
    info,
    //获取热搜信息-----------
    async hotSearch () {
      let res = await this.$api.hotSearch()
      console.log('热搜------', res.data)
      this.hots = res.data.result.hots
    },
    //搜素数据----
    async getSearch (keywords) {
      let res = await this.$api.search({
        keywords,
        type: 'mabile'
      })
      console.log('搜索数据------', res.data.result.albums)
      //判断是否查询到数据----code == 200
      if (res.data.result.albums) {
        this.list = res.data.result.albums
        this.info = ''
      } else {
        this.list = []
        this.info = '查无数据'
      }

    }
  },
  //监听器
  watch: {
    inpVal (val) {
      if (val) {
        this.isShow = false
        //搜素数据查询
        this.getSearch(val)
      } else {
        this.isShow = true
      }
    }
  }
}
</script>
<style scoped lang="less">
.search {
  padding: .3rem;
  //display: flex;
  border-bottom: 1px solid #eee;


  .inp {
    border: 0;
    outline: none;
    width: 100% - .2rem;
    height: .6rem;
    background: #ddd;
    line-height: .6rem;
    border-radius: 0.2rem;
    padding-left: .2rem;
  }
}

.hot-search {
  padding: 15px 10px 0;

  .title {
    font-size: 12px;
    line-height: 12px;
    color: #666;
  }

  .wrapper {
    margin: 10px 0 7px;

    .item {
      display: inline-block;
      height: 32px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 0 14px;
      font-size: 14px;
      line-height: 32px;
      color: #333;
      border: 1px solid #d3d4da;
      border-radius: 32px;
    }
  }
}

.search-list {
  .name {
    color: red;
    padding-left: .2rem;
  }

  .info {
    line-height: .9rem;
    height: .9rem;
    padding-left: .2rem;
    border-bottom: 1px solid #eee;
  }
}
</style>
